<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{../css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{../layui.all.js}"></script>
    <script type="text/javascript" th:src="@{../js/jquery-3.4.1.js}"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!-- 表格查询条件表单 -->
        <div class="layui-card-header layui-form">
            <div class="layui-form-item layui-form-pane">
                <div class="layui-inline">
                    <input class="layui-input layui-input-inline LAY-date" type="text" name="beginDate"
                           placeholder="开始日期">
                    <input class="layui-input layui-input-inline LAY-date" type="text" name="endDate"
                           placeholder="结束日期">
                </div>
                <div class="layui-inline">
                    <select name="search-lable-val" placeholder="类别">
                        <option value="">会计类别</option>
                        <option value="1">中级</option>
                        <option value="3">注会CPA</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <select name="search-date-val" placeholder="快捷时间">
                        <option value="">快捷时间</option>
                        <option value="1">下周</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-radius" lay-submit lay-event="search">
                        <i class="layui-icon">&#xe615;查询</i>
                    </button>
                    <button type="reset" class="layui-btn layui-btn-radius">
                        <i class="layui-icon">&#xe669;重置</i>
                    </button>
                </div>

            </div>
        </div>
        <div class="layui-card-body">
            <!-- 表格工具条 -->
            <div style="padding-bottom: 10px;">
                <button type="button" class="layui-btn layui-btn-radius" lay-event="add">
                    <i class="layui-icon">&#xe654;添加</i>
                </button>
                <button type="button" class="layui-btn layui-btn-radius" lay-event="export">
                    <i class="layui-icon">&#xe67d;导出</i>
                </button>
            </div>
            <!-- 表格内容 -->
            <table id="LAY-table" class="layui-table" lay-filter="LAY-table"></table>
            <!-- 行工具按钮组 -->
            <div class="layui-btn-group layui-hide LAY-tool-bar">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-event="detail">编辑</button>
            </div>
        </div>
    </div>
</div>


<script>
    var table = layui.table,
        form = layui.form,
        laydate = layui.laydate,
        util = layui.util;

    var winIndex;
    // ----------表单----------
    form.render();
    form.on('select(label)', function (data) {
        $.get(api.listCourse + '/' + data.value, function (data, resStatus) {
            $("#course").empty();
            if (data.code === 0 && data.data.length != 0) {
                $("#course").append(new Option("请选择", ""));
                $.each(data.data, function (index, item) {
                    $("#course").append(new Option(item.name, item.id));
                });
            }
            form.render("select");
        });
    });
    form.on('submit(LAY-add-submit)', function (data) {
        var actionUrl = '', method = 'POST';

        if (data.field.id) {
            actionUrl = api.edit;
        } else {
            actionUrl = api.add;
        }

        $.post(actionUrl, data.field, function (data, status) {
            if (data.code !== 0) {
                layer.msg('操作出错:[' + data.message + ']', {icon: 5});
            } else {
                layer.msg('操作成功', {icon: 6});
                tableIns.reload();
                win.close(winIndex);
            }
        })

    });


    // ----------表格----------
    var tableIns = table.render({
        elem: '#LAY-table',
        url: '/financialTemplate/list',
        method: 'post',
        contentType: 'application/json',
        page: true,
        autoSort: false,
        cols: [ [
            {field: 'id', title: 'ID', hide: true},
            {field: 'trainDate', title: '日期', sort: true},
            {field: 'labelDesc', title: '类别'},
            {field: 'courseDesc', title: '科目'},
            {field: 'question', title: '题目'},
            {field: 'answer', title: '答案'},
            {field: 'explain', title: '解析'},
            {field: 'createTime', title: '创建时间',  sort: true, templet: function(d){return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")}},
            // {field: 'updateTime', title: '更新时间'},
            {width: 150, align: 'center', title: '操作', toolbar: '.LAY-tool-bar'}
        ]],
        parseData: function (res) {
            return {
                "code": res.code,
                "msg": res.message,
                "count": res.data.total,
                "data": res.data.records
            };
        },
        request: {
            pageName: 'current',
            limitName: 'size',
            whereName: 'query'
        }, done: function (res) {
            lay('.LAY-date').each(function () {
                laydate.render({
                    elem: this,
                    trigger: 'click'
                });
            });
        }
    });
    // end;

    // 新增
    $('[lay-event="add"]').on('click', function (obj) {
        winIndex = win.open();
    });

    // 导出
    $('[lay-event="export"]').on('click', function (obj) {
        var params = {
            label: $('[name=search-lable-val]').val(),
            dateType: $('[name=search-date-val]').val()
        };
        $.post(api.export, params, function (data, status) {
            if (data.code === 0) {
                layer.msg('导出文件名：' + data.data, {icon: 6})
            } else {
                layer.msg('导出失败:{}' + data.message, {icon: 5})
            }
        })
    });

    // 搜索
    $('[lay-event="search"]').on('click', function (obj) {
        refresh(obj);
    });


    // 表格按钮监听
    table.on('tool(LAY-table)', function (obj) {
        var event = obj.event; // 获得 lay-event 对应的值
        switch (event) {
            case 'detail':
                layer.msg('点击编辑按钮 id:' + obj.data.id + ' ;;; 请求地址：' + api.get);
                $.get(api.get + '/' + obj.data.id, function (res) {
                    var data = res.data;
                    form.val('lay-form-data', {
                        id: data.id,
                        trainDate: data.trainDate,
                        label: data.label,
                        question: data.question,
                        answer: data.answer,
                        explain: data.explain
                    });
                });
                winIndex = win.open();
                break;
            default :
                break;
        }
    });

    var refresh = function(obj){
        tableIns.reload({
            where: {
                data: {
                    beginDate: $('[name=beginDate]').val(),
                    endDate: $('[name=endDate]').val(),
                    label: $('[name=search-lable-val]').val(),
                    dateType: $('[name=search-date-val]').val(),
                    orders: [
                        {
                            column: obj.field,
                            asc: (obj.type === 'desc' ? false : true)
                        }
                    ]
                }
            },
            done: function () {
                console.log('refresh');
            }
        });
    }

    // 表格排序
    table.on('sort(LAY-table)', function (obj) {
        refresh(obj);
    });

    // 弹窗操作
    var win = {
        open: function () {
            return layer.open({
                type: 1,
                anim: 5,
                offset: '150px',
                title: '新增练习题',
                content: $('#LAY-form'),
                cancel: function () {
                    //禁止点击该按钮关闭
                    $('#LAY-form').addClass('layui-hide');
                    return true;
                },
                success: function (index, layero) {
                    form.render();
                    $('#LAY-form').removeClass('layui-hide');
                },
                end: function (index, layero) {
                    $('#LAY-form').addClass('layui-hide');
                }
            });
        },
        close: function (index) {
            layer.close(index);
        }
    };

    // 后端接口定义
    var basePath = '/financialTemplate';
    var api = {
        add: basePath + '/add',
        edit: basePath + '/update',
        get: basePath + '/get',
        list: basePath + '/list',
        listCourse: basePath + '/listCourse',
        export: basePath + '/export'
    }

</script>
</body>

<!-- 会计题form 弹窗-->
<div id="LAY-form" class="layui-hide">
    <form class="layui-form layui-form-pane" lay-filter="lay-form-data">
        <input type="text" id="id" name="id" class="layui-hide">
        <div class="layui-form-item">
            <label class="layui-form-label">练习题日期<i style="color:red">*</i></label>
            <div class="layui-input-inline">
                <input id="trainDateInput" type="text" class="layui-input LAY-date" placeholder="请选择日期"
                       autocomplete="off"
                       name="trainDate" lay-verify="date" lay-verType="tips">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会计类别</label>
            <div class="layui-input-inline">
                <select name="label" lay-filter="label">
                    <option value="" selected>请选择</option>
                    <option value="1">中级</option>
                    <option value="3">注会CPA</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">科目</label>
            <div class="layui-input-inline">
                <select name="course" id="course"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">答案选项</label>
            <div class="layui-input-block">
                <input type="radio" name="single" value="1" title="单选" checked>
                <input type="radio" name="single" value="2" title="多选">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">题目<i style="color:red">*</i></label>
            <div class="layui-input-inline">
                <textarea name="question" placeholder="请输入内容" class="layui-textarea" lay-verify="required"
                          lay-verType="tips"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">答案<i style="color:red">*</i></label>
            <div class="layui-input-inline">
                <input type="text" name="answer" placeholder="请输入答案" autocomplete="off" class="layui-input"
                       lay-verify="required" lay-verType="tips">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">解析<i style="color:red">*</i></label>
            <div class="layui-input-inline">
                <textarea name="explain" placeholder="请输入内容" class="layui-textarea" lay-verify="required"
                          lay-verType="tips"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="LAY-add-submit">立即提交</button>
                <button type="reset" class="layui-btn">重置</button>
                <button type="button" class="layui-btn LAY-from-close">关闭</button>
            </div>
        </div>
    </form>
</div>

</html>